<template>
  <el-card>
    <el-row :gutter="20">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="活动uuid">
          <el-input
            v-model="formInline.uuid"
            placeholder="活动uuid"
            clearable
          />
        </el-form-item>
        <el-form-item label="活动名称">
          <el-input
            v-model="formInline.name"
            placeholder="活动名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="活动状态">
          <el-select
            v-model="formInline.state"
            clearable
            placeholder="请选择活动状态"
            style="width: 240px"
          >
            <el-option
              v-for="item in searchColumns"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="initTableList()">查询</el-button>
          <el-button type="primary" @click="add()">创建新活动</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </el-card>

  <el-card>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column
        v-for="(item, index) in tableColums"
        :prop="item.prop"
        :label="item.label"
        :index="index"
        :width="item.width"
      >
        <template v-slot="{ row }" v-if="item.prop === 'state'">
          {{ getStateValue(row.state) }}
        </template>
        <template v-slot="{ row }" v-else-if="item.prop === 'activityType'">
          {{ getActivityValue(row.activityType) }}
        </template>
        <template #default="{ row }" v-if="item.prop === 'action'">
          <el-button-group>
            <el-button type="info" @click="detail(row)">详情</el-button>
            <el-button type="primary" @click="update(row)">修改</el-button>
            <el-button
              type="primary"
              v-if="showEnable(row.state)"
              @click="updateState(row, 1)"
              >启用</el-button
            >
            <el-button
              type="danger"
              v-if="showStop(row.state)"
              @click="updateState(row, 4)"
              >停用</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="formInline.pageNo"
      v-model:page-size="formInline.pageSize"
      :page-sizes="[2, 10, 50, 100]"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <Add
    v-model="addDialogVisible"
    :dialogTitle="dialogTitle"
    @initTableList="initTableList"
  />
  <Detail
    v-model="detailDialogVisible"
    :dialogTitle="dialogTitle"
    :rowvalue="rowvalue"
  />
  <Update
    v-model="updateDialogVisible"
    :dialogTitle="dialogTitle"
    :rowvalue="rowvalue"
    @initTableList="initTableList"
  />
</template>

<script setup>
import { ref } from "vue";
import { searchColumns, tableColums } from "./searchColumns.js";
import {
  getInteractiveActivityList,
  updateInteractiveActivit,
} from "@/api/interactiveActivity.js";
import Add from "./interactiveActivityAdd.vue";
import Detail from "./interactiveActivityDetail.vue";
import Update from "./interactiveActivityUpdate.vue";
import { activityTypes } from "@/utils/ActivityCommon.js";
import { isNull } from "@/utils/filter";
const formInline = ref({
  uuid: null,
  name: null,
  state: null,
  pageNo: 1,
  pageSize: 2,
  total: 0,
});

const handleSizeChange = (val) => {
  formInline.value.pageNo = 1;
  formInline.value.pageSize = val;
  initTableList();
};
const handleCurrentChange = (val) => {
  formInline.value.pageNo = val;
  initTableList();
};

const getStateValue = (key) => {
  return searchColumns.filter((obj) => obj.value === key)[0].label;
};
const getActivityValue = (key) => {
  const res = activityTypes.filter((obj) => obj.key === key);
  if (isNull(res)) {
    return "--";
  }
  return activityTypes.filter((obj) => obj.key === key)[0].lable;
};

const tableData = ref([]);
const initTableList = async () => {
  const response = await getInteractiveActivityList(formInline.value).catch(
    (err) => {
      console.log(err);
    }
  );
  if (response.code != 200) {
    console.log("err");
  }
  tableData.value = response.data.data;
  formInline.value.total = response.data.total;
};
initTableList();

const rowvalue = ref({});

const dialogTitle = ref("");
const addDialogVisible = ref(false);
const add = () => {
  addDialogVisible.value = true;
  dialogTitle.value = "新增";
};

const detailDialogVisible = ref(false);
const detail = (row) => {
  detailDialogVisible.value = true;
  dialogTitle.value = "详情";
  rowvalue.value = JSON.parse(JSON.stringify(row));
};

const updateDialogVisible = ref(false);
const update = (row) => {
  updateDialogVisible.value = true;
  dialogTitle.value = "修改";
  rowvalue.value = JSON.parse(JSON.stringify(row));
};

const showEnable = (state) => {
  if (state === 0) {
    return true;
  }
  return false;
};
const showStop = (state) => {
  if (state === 1 || state === 2) {
    return true;
  }
  return false;
};

const updateState = (row, state) => {
  const msg = state == 1 ? "启用" : "停用";
  ElMessageBox.confirm("确定" + msg + "?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then((action) => {
      if ("confirm" === action) {
        changeState(row.uuid, state);
        ElMessage({
          type: "success",
          message: msg + "成功",
        });
      }
    })
    .catch(() => {});
};

const changeState = (uuid, state) => {
  const param = {
    uuid: uuid,
    state: state,
  };
  const res = updateInteractiveActivit(param).catch((err) => {
    ElMessage({
      message: err == null ? "服务异常" : err.msg + 11,
      type: "error",
      plain: true,
    });
  });
  res.then((res) => {
    if (res.code == 200) {
      initTableList();
    } else {
      const msg = res == null ? "后端服务异常" : res.msg;
      ElMessage({
        message: msg,
        type: "error",
        plain: true,
      });
    }
  });
};
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-button-group .el-button:not(:last-child) {
  margin-right: 6px;
}

::v-deep .el-pagination {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-row header {
  text-align: right;
}
</style>
